<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <Header :identity="userData" @get-percenter="getPercenter" />
    <div class="navigation">
      <div class="left">
        <lu>
          <li :class="{ action: isActive('PlatformManagement') }">
            <router-link
              to="/administrators/platform"
              @click.stop="selectAction('PlatformManagement')"
              ><img src="@/assets/fenxiang.png" alt="" />
              <p>平台管理</p></router-link
            >
          </li>
          <li :class="{ action: isActive('ProjectManagement') }">
            <a @click="showClick" @click.stop="selectAction('ProjectManagement')"
              ><img src="@/assets/geren_1.png" alt="" />
              <p>立项管理</p></a
            >
            <el-dropdown ref="dropdown1" trigger="contextmenu" style="margin-right: 30px">
              <span class="el-dropdown-link">Action</span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="$router.push('/administrators/grouping')"
                    >分配高校专家组</el-dropdown-item
                  >
                  <el-dropdown-item @click="$router.push('/administrators/review')"
                    >高校专家组评审情况</el-dropdown-item
                  >
                  <el-dropdown-item @click="$router.push('/administrators/examine')"
                    >高校审核项目</el-dropdown-item
                  >
                  <el-dropdown-item @click="$router.push('/administrators/number')"
                    >项目编号管理</el-dropdown-item
                  >
                  <el-dropdown-item @click="$router.push('/administrators/adjustment')"
                    >项目调整</el-dropdown-item
                  >
                  <!-- <el-dropdown-item @click="$router.push('/administrators/report')"
                    >校级立项项目信息上报</el-dropdown-item
                  > -->
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </li>
          <li :class="{ action: isActive('PersonalCenter') }">
            <router-link to="/administrators/personal/" @click.stop="selectAction('PersonalCenter')"
              ><img src="@/assets/geren_1.png" alt="" />
              <p>个人中心</p></router-link
            >
          </li>
          <li :class="{ action: isActive('more') }">
            <router-link to="/administrators/platform" @click.stop="selectAction('more')"
              ><img src="@/assets/shenqing.png" alt="" />
              <p>更多</p></router-link
            >
          </li>
        </lu>
      </div>
      <div class="right">
        <input type="text" name="" id="" placeholder="搜索菜单" />
      </div>
    </div>
    <transition name="slide-fade" mode="out-in">
      <router-view></router-view>
    </transition>
    <Bottom></Bottom>
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Bottom from '@/components/Bottom.vue'
import { ref } from 'vue'

const dropdown1 = ref()
const activeAction = ref('PlatformManagement')
const selectAction = (action) => {
  activeAction.value = action // 更新当前激活的action
}
const isActive = (action) => {
  return activeAction.value === action // 判断当前action是否激活
}
function showClick() {
  console.log(123)

  if (!dropdown1.value) return
  dropdown1.value.handleOpen()
}

const userData = {
  user: '管理员',
  url: '/administrators/personal/'
}
const getPercenter = (msg) => {
  selectAction(msg) // 切换到个人中心页面
}
</script>

<style lang="less" scoped>
.navigation {
  height: 70px;
  background-color: #1461cd;
  padding: 15px 40px;
  line-height: 70px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  .left {
    .el-dropdown-link {
      color: #1461cd;
      text-align: center;
      margin-left: 20px;
      // margin-bottom: 20px;
      // background-color: #fff;
    }
    .el-icon--right {
      background-color: #fff;
    }
    img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
    lu {
      display: flex;
      li {
        width: 170px;
        height: 40px;
        line-height: 40px;
        margin: 0 5px;
        border-radius: 5px;
        padding: 0 30px;
        cursor: pointer;
        a {
          display: flex;
          align-items: center;
          text-decoration: none;
          color: #fff;
        }
        &:hover {
          background-color: #196adc;
        }
      }
      .action {
        background-color: #196adc;
      }
    }
  }
  .right {
    display: flex;
    color: #fff;
    input {
      padding: 0 45px;
      width: 200px;
      border: 0;
      border-radius: 5px;
      color: #fff;
      font-size: 14px;
      outline: none;
      background: #196adc url('@/assets/搜索.png') no-repeat 15px;
      background-size: 18px;
    }
    ::placeholder {
      color: #fff;
    }
  }
}
</style>
